<template>
	<view class="content">
		<view class="topBox">
			<h3>Hello,</h3>
			<h4>Welcome To Login</h4>
		</view>	
		<view class="inputBox">
			<view class="ipt">
				<h4>account number</h4>
				<input type="text" v-model="username"  placeholder="Please enter your account number" />
			</view>	
			<view class="ipt">
				<h4>secret code</h4>
				<input type="password" v-model="password" placeholder="Please enter your secret code" />
			</view>	
			<button class="loginBtn" @click="login">Login</button>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: 'admin',  
				password: '123456' 
			}
		},
		
		methods: {
			login() {  
				const that = this;
				let obj = {
					username: that.username,
					password:that.password
				}
				that.$api.login(obj).then(res => {
					console.log(res);
					if(res.data.code === 200){
						const token = res.data.data.accessToken
						uni.setStorageSync('token', token);  
						uni.switchTab({
						      url: '/pages/index/index'  
						    }); 
					} else {  
						uni.showToast({  
						  title: '用户名或密码错误',  
						  icon: 'none'  
						});  
					  }  
				}).catch(err => {
					console.log("进行网络请求--失败", err);
				})
			      // 模拟登录验证  
			    //   if (this.username === 'admin' && this.password === '123456') {  
			    //     // 登录成功，生成token（这里仅为示例，实际中应从服务器获取）  
			    //     const token = 'mocked_token_123456';  
			    //     // 存储token，通常使用uni.setStorageSync  
			    //     uni.setStorageSync('token', token);  
			    //     // 跳转到首页  
			    //     uni.switchTab({  
			    //       url: '/pages/index/index'  
			    //     });  
			    //   } else {  
			    //     uni.showToast({  
			    //       title: '用户名或密码错误',  
			    //       icon: 'none'  
			    //     });  
			    //   }  
			    // }  
			}
		}
	}
</script>

<style>
	
.content {
	 height: 100%;
	 background-color: aquamarine;
	 background: url("/static/image/bg.png") no-repeat;
	 background-size: cover;
}

.topBox {
	 font-size: 34rpx;
	 color: #333333;
	 padding: 80rpx 50rpx;
}

h3 {
	margin-bottom: 10rpx;
}

.inputBox {
	 position: fixed;
	 bottom: 0;
	 left: 0;
	 width: 750rpx;
	 height: 75vh;
	 background-color: #fff;
	 border-top-left-radius: 40rpx;
	 border-top-right-radius: 40rpx;
	 padding: 60rpx;
	 box-sizing: border-box;
}

.ipt {
	margin-bottom: 50rpx;
}

.ipt h4 {
	 margin-bottom: 20rpx;
	 font-size: 36rpx;
	 color: #333;
}

.ipt input {
	 border-bottom: 1px solid #dedede;
	 padding-bottom: 20rpx;
	 font-size: 28rpx;
}

.loginBtn {
	 margin-top: 20rpx;
	 line-height: 85rpx;
	 text-align: center;
	 background: #E6A1B3;
	 border-radius: 40rpx;
	 color: #fff;
	 margin-top: 50rpx;
}

</style>
